<!-- 资金流水 -->
<template>
  <div class="app-container">
    <!-- header -->
    <!-- <el-card>
      <div slot="header" class="header">
        <span></span>
        <el-button type="success" icon="el-icon-plus" size="small">Button</el-button>
      </div>
    </el-card> -->
    <el-card style="marginTop:20px">
      <div class="table-wrapper">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="#" min-width="15%" />
          <el-table-column prop="id" label="流水号" width="100" />
          <el-table-column prop="nickName" label="客户昵称" min-width="150" />
          <el-table-column prop="occurBala" label="发生金额" min-width="150" />
          <el-table-column prop="occurDateTime" label="日期" width="180">
            <template slot-scope="scope">{{ scope.row.occurDateTime | timeFilter }}</template>
          </el-table-column>
          <el-table-column prop="type" label="流水类型" width="150">
            <template slot-scope="scope">
              <el-tag size="small">{{ scope.row.type| getType}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="150">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status ? 'success' :'primary'" size="small">{{ scope.row.status| getStatus }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.status" type="text" @click="onClickAudit(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="prev, pager, next" @current-change="currentChange" :page-count="Math.ceil(this.pageInfo.total / this.pageInfo.pageSize)"></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import config from './config';

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      pageInfo: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 展示数量
        total: 1, // 总记录数
      },
    };
  },
  created() {},
  mounted() {
    this.getAccountList();
  },
  computed: {},
  methods: {
    /**
     * 当前页变更
     */
    currentChange(val) {
      this.pageInfo.pageNum = val;
      this.getAccountList();
    },
    async onClickAudit({ id }) {
      const confirm = await this.$confirm(
        `此操作将无法撤销, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch(() => {});

      confirm && this.setAccountAudited(id);
    },
    async getAccountList() {
      const params = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        needTotalCount: true,
      };
      const { data, total } = await this.$api.getAccountList(params);
      this.tableData = data;
      this.pageInfo.total = total;
    },
    async setAccountAudited(id) {
      const response = await this.$api.setAccountAudited(id);
      if (response.success) {
        this.$message.success('审核成功');
        this.getAccountList();
      }
    },
  },
  filters: {
    getStatus(status) {
      return config.status[status];
    },
    getType(type) {
      return config.type[type];
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
